<template>

    <div>

        <el-breadcrumb separator="/" style="padding: 10px 10px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">产品功能</a></el-breadcrumb-item>
            <el-breadcrumb-item>账号列表</el-breadcrumb-item>
        </el-breadcrumb>


        <el-form ref="form" :model="form" label-width="80px" :inline="true" :label-width="50" label-position="left"
                 style="background-color: #fff; border: 1px solid #EBEEF5;padding: 20px;box-sizing: border-box;margin-bottom: 10px">
            <el-form-item label="账户id">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.name"></el-input>
            </el-form-item>


            <el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注册日期">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="display: flex;justify-content: center">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
                <el-button size="medium">取消</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="orderTable"
                  :data="tableData"
                  style="width: 100%;"
                  v-loading="tableloding" border>
            <el-table-column type="selection" width="60" align="center"></el-table-column>
            <el-table-column label="编号" width="80" align="center">
                <template slot-scope="scope">{{scope.row.id}}</template>
            </el-table-column>
            <el-table-column label="订单编号" width="180" align="center">
                <template slot-scope="scope">{{scope.row.detailsid}}</template>

            </el-table-column>
            <el-table-column label="提交时间" width="180" align="center">
                <template slot-scope="scope">{{scope.row.date}}</template>

            </el-table-column>
            <el-table-column label="用户账号" align="center">
                <template slot-scope="scope">{{scope.row.test}}</template>

            </el-table-column>
            <el-table-column label="订单金额" width="120" align="center">
                <template slot-scope="scope">￥{{scope.row.price}}</template>

            </el-table-column>
            <el-table-column label="支付方式" width="120" align="center">
                <template slot-scope="scope">{{scope.row.paytype==0?"支付宝":"微信"}}</template>

            </el-table-column>
            <el-table-column label="订单来源" width="120" align="center">
                <template slot-scope="scope">{{scope.row.orderfrom}}</template>

            </el-table-column>
            <el-table-column label="订单状态" width="120" align="center">
                <template slot-scope="scope">{{scope.row.gender==0?"已发货":"待发货"}}</template>

            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <el-button size="small" @click="handleEdit">发货</el-button>
            </el-table-column>
        </el-table>

        <div class="block">
            <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                <div style="display: flex;justify-content: space-between">
                    <el-select v-model="form.region" placeholder="批量操作">
                        <el-option label="批量发货" value="shanghai"></el-option>
                        <el-option label="关闭订单" value="beijing"></el-option>
                        <el-option label="删除订单" value="beijing"></el-option>
                    </el-select>
                    <el-button>确认</el-button>
                </div>

                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000">
                </el-pagination>

            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                }, {
                    date: '2016-05-02',
                    id: 1,
                    detailsid: "201809150101000001",
                    test: "text",
                    price: '1872',
                    paytype: 0,
                    orderfrom: 'APP订单',
                    gender: 0
                },],
                search: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                tableloding: false

            }
        },
        methods: {
            handleEdit(index, row) {
                this.$router.push('/home/fahuo')
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableloding = true
                    setTimeout(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.tableloding = false
                    }, 500)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            onSubmit() {
                console.log('submit!');
            }
        },
    }
</script>
<style scoped>

</style>